<template>
  <div>
    <el-container>
      <el-header height="scrollerHeight">
        <nav-menu :info="info"></nav-menu>
        <web-banner></web-banner>
      </el-header>
      <el-main class="main">
        <div class="container">
          <div name="login-logout" v-if="getToken === ''" class="userInfo">
            <el-card class="box-card">
            <router-link to="/login"> <el-button>登录</el-button></router-link>
            <router-link to="/register"><el-button>注册</el-button></router-link>
            </el-card>
          </div>
          <div name="userInfo" v-else class="userInfo">
            <el-card class="box-card">
              <el-row>
                <el-col :span="4" justify="center" align="middle">
                  <div class="block">
                    <el-avatar
                      :size="50"
                      :src="info.head_img"
                    ></el-avatar>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="text item">name</div>
                </el-col>
                <el-col :span="4">
                  <router-link to="http://localhost:8080/#/"
                    ><el-button @click="signOut"
                      >退出登录</el-button
                    ></router-link
                  >
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
      </el-main>
      <el-footer></el-footer>
    </el-container>

    <!-- <common-footer></common-footer> -->
  </div>
</template>

<script>
import CommonFooter from "@/components/CommonFooter.vue";
import { getUserInfo } from "@/api/getData.js";
import defaultHeadImg from "@/assets/logo.png";
import WebBanner from "../../components/WebBanner";
import NavMenu from "../../components/NavMenu.vue";
export default {
  components: {
    CommonFooter,
    NavMenu,
    WebBanner,
  },
  data() {
    return {
      info: {},
      defaultHeadImg: defaultHeadImg,
    };
  },
  computed: {
    scrollerHeight: function () {
      return window.innerHeight - 46 - 50 + "px";
    },
    //computed 有缓存功能 强调属性获取    methods强调方法获取
    getToken() {
      return this.$store.state.token;
    },
  },
  methods: {
    async getInfo() {
      try {
        const result = await getUserInfo(this.getToken);
        if (result.data.code === 0) {
          this.info = result.data.data;
        }
      } catch (err) {
        console.log(err);
      }
    },
    async signOut() {
      try {
        await this.$store.dispatch("clearToken");
        localStorage.removeItem("token");

        location.reload();
      } catch (err) {
        console.log(err);
      }
    },
  },
  mounted() {
    //页面渲染完之后执行的操作
    if (this.getToken) {
      this.getInfo();
    }
  },
};
</script>

<style lang="scss" scoped>
.card {
  height: 50%;
}
.userInfo {
  width: 500px;
}
.main {
  background-color: #f9f9f9;
}
.container {
  position: flex;
  align-content: center;
  padding-left: 10%;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>